import React, { useImperativeHandle, useState } from 'react';
import { Modal, Spin } from 'antd';
import { defaultFormatResult, useRequest } from '@/hooks';
import { getOrganizationByCode } from '@/pages/Organization/OrgFlow/services';
import { eventTrack } from '@/utils/track';
import moment from 'moment';
import styles from './index.less';

/**
 * 公司/机构信息 Modal 组件
 * @param
 * @returns {JSX.Element}
 * @constructor
 */
const OrganizationModal = React.forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false);

    const { data: organizationData, loading, run, mutate } = useRequest(
        organizationCode => getOrganizationByCode({ organizationCode }),
        {
            manual: true,
            ...defaultFormatResult,
            onSuccess: result => {
                if (result) {
                    eventTrack({
                        eventName: 'personnel_management_organization_view_context_click',
                        pageName: 'personnel_management_organization',
                        eventProps: {
                            click_context: `${result.parentOrganizationName}-${result.organizationName}`
                        }
                    });
                }
            }
        }
    );

    const {
        organizationName,
        organizationType,
        organizationDesc,
        createTime,
        parentOrganizationName,
        companyNumber,
        employeeNum,
        planNum
    } = organizationData || {};

    const open = organizationCode => {
        setVisible(true);
        run(organizationCode).then();
    };

    const handleCancel = () => {
        setVisible(false);
        mutate(null);
    };

    useImperativeHandle(ref, () => ({
        open
    }));

    // render
    return (
        <Modal
            title={organizationData?.organizationName}
            visible={visible}
            className={styles.clearFooterBorder}
            style={{ fontSize: 12 }}
            okButtonProps={{ style: { display: 'none' } }}
            width={400}
            cancelButtonProps={{ style: { display: 'none' } }}
            onCancel={handleCancel}
            onOk={handleCancel}
        >
            <div className={styles.modalBody}>
                <div className={styles.organizationWrapper}>
                    {loading && (
                        <div className={styles.loading}>
                            <Spin />
                        </div>
                    )}
                    {organizationData && (
                        <>
                            {organizationType && (
                                <p>
                                    <strong>{`${['', '机构', '公司', '部门'][organizationType]}名称：`}</strong>
                                    <span title={organizationName}>{organizationName}</span>
                                </p>
                            )}
                            {parentOrganizationName && (
                                <p>
                                    <strong>上级机构：</strong>
                                    <span title={parentOrganizationName}>{parentOrganizationName}</span>
                                </p>
                            )}
                            <p>
                                <strong>在职员工/总编制：</strong>
                                <span title={`${employeeNum} / ${planNum}`}>
                                    {employeeNum}&nbsp;/&nbsp;{planNum}
                                </span>
                            </p>
                            {organizationType !== 3 && (
                                <p>
                                    <strong>下属公司：</strong>
                                    <span title={companyNumber}>{companyNumber}</span>
                                </p>
                            )}
                            <p>
                                <strong>创建时间：</strong>
                                {createTime && (
                                    <span title={moment(createTime).format('YYYY-MM-DD')}>
                                        {moment(createTime).format('YYYY-MM-DD')}
                                    </span>
                                )}
                            </p>
                            <p>
                                <strong>{`${['', '机构', '公司', '部门'][organizationType]}简介：`}</strong>
                                <span>{organizationDesc}</span>
                            </p>
                        </>
                    )}
                </div>
            </div>
        </Modal>
    );
});

export default OrganizationModal;
